<template>
	<view class="container">
		<view class="banner">
			<image src="/static/img/xz_banner.jpg" mode="widthFix"></image>
		</view>
		<view class="select_box">
			<view class="select_month" @click="selectChange">
				<input placeholder="请选择" v-model="state.date" disabled></input>
				<u-icon name="arrow-down"></u-icon>
			</view>
			<view style="color: red;">注：可查询以往月份的工资信息！</view>
		</view>
		<view class="main">
			<view class="main_head">
				<u-row customStyle="padding: 10rpx 0;">
					<u-col span="4" textAlign="center">曝光人头像</u-col>
					<!-- <u-col span="3" textAlign="center">曝光人名称</u-col> -->
					<u-col span="4" textAlign="center">提交时间</u-col>
					<u-col span="4" textAlign="center">薪资图片</u-col>
				</u-row>
			</view>
			<template v-if="state.list.length > 0">
				<view class="main_box" v-for="(item, index) in state.list" :key="index">
					<u-row customStyle="padding: 10rpx 0;">
						<u-col span="4" textAlign="center">
							<image :src="item.avatar" class="user_img"></image>
						</u-col>
						<!-- <u-col span="3" textAlign="center">
							<view class="user_name"> 
								{{item.name}}
							</view>
						</u-col> -->
						<u-col span="4" textAlign="center">
							<view class="user_time">
								{{item.createtime}}
							</view>
						</u-col>
						<u-col span="4" textAlign="center">
							<image :src="item.images_show[0]" mode="" class="user_gz_img" @click="preview(item.images_show)">
							</image>
						</u-col>
					</u-row>
				</view>
			</template>
			<u-empty v-else text="暂无船员上传信息" mode="list"></u-empty>
		</view>
	</view>
	<!-- <ad-rewarded-video ref="adRewardedVideo" adpid="adunit-0b3fcbf256d6e6fb" :preload="false" :loadnext="false"
		:disabled="true" v-slot:default="{loading, error}" @load="onadload" @close="onadclose" @error="onaderror">
		<view class="ad-error" v-if="error">{{error}}</view>
	</ad-rewarded-video> -->
	<KDatePicker v-model="state.dateShow" type="month" is-range @change="dateChange" formatter="YYYY-MM" />
	<Tabbar :value="-1" />
</template>

<script setup lang="ts">
	import { reactive, ref } from 'vue';
	import Tabbar from '@/components/tabbar.vue'
	import KDatePicker from '@/components/k-date-picker/KDatePicker.vue'
	import { wageslist } from '@/common/api.js'
	import { onLoad, onReachBottom, onShow } from '@dcloudio/uni-app'
	let rewardedVideoAd : any = null
	const adRewardedVideo = ref(null)
	const state = reactive({
		list: [],
		previewList: [],
		dateShow: false,
		date: '',
		page: 1,
		ship_id: '',
		guanggaoLoad: false,
		islock: false,
	})
	const onadload = (e) => {
		console.log('广告数据加载成功');
		state.guanggaoLoad = false
		if (wx.createRewardedVideoAd) {
			rewardedVideoAd = wx.createRewardedVideoAd({ adUnitId: 'adunit-0b3fcbf256d6e6fb' })
			rewardedVideoAd.onLoad(() => {
				console.log('onLoad event emit')
			})
			rewardedVideoAd.onError((err) => {
				console.log('onError event emit', err)
			})
			rewardedVideoAd.onClose((res) => {
				console.log('onClose event emit', res)
			})
		}
	}
	const onadclose = (e) => {
		const detail = e.detail
		// 用户点击了【关闭广告】按钮
		if (detail && detail.isEnded) {
			// 正常播放结束
			console.log("onadclose " + detail.isEnded);
			state.islock = true
		} else {
			// 播放中途退出
			console.log("onadclose " + detail.isEnded);
		}
	}
	const onaderror = (e) => {
		// 广告加载失败
		console.log("onaderror: ", e.detail);
		state.islock = false
	}
	const preview = (urls : string[]) => {
		if (!state.islock) {
			// state.guanggaoLoad = true
			rewardedVideoAd.show()
				.catch(() => {
					rewardedVideoAd.load()
						.then(() => rewardedVideoAd.show())
						.catch(err => {
							console.log('激励视频 广告显示失败')
							state.islock = true
						})
				})
			state.previewList = urls
		} else {
			uni.previewImage({
				current: urls[0], // 当前显示图片的http链接
				urls: urls // 需要预览的图片http链接列表
			});
		}
	}
	const selectChange = () => {
		state.dateShow = !state.dateShow
	}
	const dateChange = (e) => {
		state.date = e
		state.dateShow = !state.dateShow
		state.page = 1
		getInfo()
	}
	onLoad((o) => {
		const date = new Date()
		let year = date.getFullYear(); // 获取当前年份
		let month = date.getMonth() + 1;
		state.date = `${year}-${month}`
		state.ship_id = o.id

		getInfo()
	})
	onShow(() => {
		// adRewardedVideo.value.load()
		if (wx.createRewardedVideoAd) {
			rewardedVideoAd = wx.createRewardedVideoAd({ adUnitId: 'adunit-0b3fcbf256d6e6fb' })
			rewardedVideoAd.onLoad(() => {
				console.log('onLoad event emit')
			})
			rewardedVideoAd.onError((err) => {
				console.log('onError event emit', err)
			})
			rewardedVideoAd.onClose(res => {
				// 用户点击了【关闭广告】按钮
				if (res && res.isEnded) {
					state.islock = true
					uni.previewImage({
						current: state.previewList[0], // 当前显示图片的http链接
						urls: state.previewList // 需要预览的图片http链接列表
					});
					// 正常播放结束，可以下发游戏奖励
				} else {
					// 播放中途退出，不下发游戏奖励
				}
			})
		}
	})
	onReachBottom(() => {
		state.page++
		getInfo()
	})
	const getInfo = async () => {
		const { page, date, ship_id } = state
		const { data } = await wageslist({
			page,
			date,
			ship_id,
		})
		if (state.page == 1) {
			state.list = []
		}
		console.log(data)
		state.list.push(...data.list)
	}
</script>

<style lang="scss" scoped>
	page {
		height: 100%;
		overflow: hidden;
	}

	.container {
		position: relative;
		width: 750rpx;
		height: 100%;
		padding: 0 35rpx;
		box-sizing: border-box;
		background-color: #f4f4f4;

		.banner {
			width: 100%;
			padding: 28rpx 0 22rpx;

			image {
				width: 100%;
			}
		}

		.select_box {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.select_month {
			width: 240rpx;
			height: 64rpx;
			box-sizing: border-box;
			position: relative;
			margin: 20rpx 0;

			input {
				width: 100%;
				height: 100%;
				border-radius: 8rpx;
				border: 2rpx solid #282828;
				padding-left: 20rpx;
			}

			:deep().u-icon {
				position: absolute;
				top: 0;
				bottom: 0;
				right: 20rpx;
				margin: auto;
			}
		}

		.main {
			flex: 1;
			background-color: #fff;
			box-shadow: rgba(0, 0, 0, 0.1) 0rpx 2rpx 3rpx -1rpx;
			padding: 25rpx 35rpx;
			box-sizing: border-box;

			.main_head {
				font-size: 24rpx;
				color: #282828;
				white-space: nowrap;

				:deep().u-col {
					height: 80rpx;
					line-height: 80rpx;
					font-size: 28rpx;
				}
			}

			.main_box {
				border-bottom: 2rpx solid #282828;

				:deep().u-col {
					height: 100rpx;
					font-size: 28rpx;
					display: flex;
					justify-content: center !important;
					padding: 25rpx 0 !important;
				}

				&:last-child {
					border-bottom: 0;
				}
			}

			.user_time,
			.user_name {
				font-size: 24rpx;
				color: #282828;
			}

			.user_time {}

			.user_img {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
			}

			.user_name,
			.user_time {
				height: 80rpx;
				line-height: 80rpx;
			}

			.user_gz_img {
				width: 88rpx;
				height: 48rpx;
			}
		}
	}
</style>